

import React from 'react';
import { history } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import { Row, Col, Card, Input, Button, Tooltip, Avatar, Menu } from 'antd';
import styles from './index.less';
import { UserOutlined } from '@ant-design/icons';

import { EllipsisOutlined, QuestionCircleOutlined, SearchOutlined } from '@ant-design/icons';
import { ProColumns } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import { list } from '@/services/user/api'



const valueEnum = {
  0: 'close',
  1: 'running',
  2: 'online',
  3: 'error',
};

const tableListDataSource = [];

const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];

for (let i = 0; i < 5; i += 1) {
  tableListDataSource.push({
    key: i,
    name: 'AppName',
    containers: Math.floor(Math.random() * 20),
    creator: creators[Math.floor(Math.random() * creators.length)],
    status: valueEnum[Math.floor(Math.random() * 10) % 4],
    createdAt: Date.now() - Math.floor(Math.random() * 2000),
    money: Math.floor(Math.random() * 2000) * i,
    progress: Math.ceil(Math.random() * 100) + 1,
    memo: i % 2 === 1 ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴' : '简短备注文案',
  });
}

const columns = [
  {
    title: '用户',
    dataIndex: 'name',
    render: (text, record, index) => {
      return (
        <div>
          <Avatar icon={<UserOutlined />} src={record.avatar} style={{marginRight: 16}}/>
          <a>{record.nick_name}</a>
        </div>
      )
    },
  },
  {
    title: '消费金额',
    onHeaderCell: (column) => {
      console.log(column)
    },
    dataIndex: 'creator',
  },
  {
    title: '积分余额',
    dataIndex: 'creator',
  },
  {
    title: '消费次数',
    dataIndex: 'creator',
  },
  {
    title: '注册时间',
    key: 'since',
    dataIndex: 'created_at',
    // valueType: 'date',
    // sorter: (a, b) => a.createdAt - b.createdAt,
  },
  {
    title: '上次消费时间',
    key: 'since',
    dataIndex: 'createdAt',
    valueType: 'date',
    // sorter: (a, b) => a.createdAt - b.createdAt,
  },
  {
    title: '最后访问时间',
    width: 140,
    key: 'since',
    dataIndex: 'createdAt',
    valueType: 'date',
    // sorter: (a, b) => a.createdAt - b.createdAt,
  },
  {
    title: '操作',
    key: 'option',
    valueType: 'option',
    render: () => [
      <a key="link">链路</a>,
      <a key="link2">报警</a>
    ],
  },
];

const cardHeadStyle = {
  borderBottom: 0,
  
}

const spanStyle = {
  fontSize: 32,
  fontWeight: 700,
  opacity: 0.85
}

const cardData = [
  {
    title: '总用户数',
    num: 12
  },
  {
    title: '今日新增用户数',
    num: 3
  },
  {
    title: '今日支付人数',
    num: 6
  },
  {
    title: '今日客单价',
    num: 220
  }
]

const cards = cardData.map((data) => {
  return (
    <Col span={6}>
      <Card title={data.title} bordered={false} style={{ width: 300 }}
        headStyle={cardHeadStyle}>
        <div>
          <span style={spanStyle}>{data.num}</span>
        </div>
      </Card>
    </Col>
  )
})

const content = (
  <div>
    <Row>
      {cards}
    </Row>
  </div>
)

const menu = (
  <Menu>
    <Menu.Item key="1">1st item</Menu.Item>
    <Menu.Item key="2">2nd item</Menu.Item>
    <Menu.Item key="3">3rd item</Menu.Item>
  </Menu>
);

const MemberList = () => {

  return (
    <PageContainer content={content}>
      <ProTable
        // showHeader={false}
        columns={columns}
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params,
          sort,
          filter,
        ) => {
          // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
          // 如果需要转化参数可以在这里进行修改
          const msg = await list({
            page: params.current,
            pageSize: params.pageSize,
          })
          return {
            data: msg.data.content,
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: true,
            // 不传会使用 data 的长度，如果是分页一定要传
            total: msg.data.total_elements,
          }
        }}
        rowKey="key"
        pagination={{
          showQuickJumper: true,
        }}
        search={{
          layout: 'vertical',
          defaultCollapsed: false,
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button key="danger">
            打标签
          </Button>,
          <Button key="show">改积分</Button>,
          <Button key="primary">
            发优惠券
          </Button>
        ]}
      />
    </PageContainer>
  );
};

export default MemberList;
